import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:share_fit/app/components/back_btn_icon.dart';
import 'package:share_fit/app/components/calendar_btn_icon.dart';
import 'package:share_fit/app/components/date_type_bar.dart';
import 'package:share_fit/app/components/table_calendar_dialog.dart';
import 'package:share_fit/app/controllers/home/stress/components/stress_bar_chart.dart';
import 'package:share_fit/app/controllers/home/stress/state.dart';
import 'package:share_fit/app/helper/ext/tr_ext.dart';
import 'package:share_fit/app/models/home/date_type_enum.dart';
import 'package:share_fit/generated/locales.g.dart';

import 'logic.dart';

class StressPage extends StatelessWidget {
  StressPage({super.key});

  final logic = Get.find<StressLogic>();
  final state = Get.find<StressLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: BackBtnIcon(onTap: () => logic.goBack()),
        actions: [
          GetBuilder<StressLogic>(
            id: 'calendar_btn_icon',
            builder: (_) {
              return _.state.selectedDateType.value == DateType.day
                  ? CalendarBtnIcon(
                      calenderDay: _.state.selectedDate,
                      onTap: () => _showDatePicker(context),
                    )
                  : Container();
            },
          ),
        ],
      ),
      body: Container(
        padding: EdgeInsets.symmetric(horizontal: 40.w),
        child: ListView(
          children: [
            SizedBox(height: 60.h),
            GetBuilder<StressLogic>(
              id: 'date_type_bar',
              builder: (ctrl) => DateTypeBar(
                initIndex: ctrl.state.dateTypeBarIndex,
                onSelectChanged: (index, dateType) => ctrl.changeDateType(selectedIndex: index, type: dateType),
              ),
            ),
            SizedBox(height: 60.h),
            _buildCalendarContainer(),
            SizedBox(height: 59.h),
            _buildSummaryContainer(),
            SizedBox(height: 90.h),
            _buildChartContainer(),
            SizedBox(height: 60.h),
            _buildDataDetailContainer(),
            SizedBox(height: 60.h),
            _buildRatioContainer(),
            SizedBox(height: 60.h),
          ],
        ),
      ),
    );
  }

  _buildCalendarContainer() {
    return GetBuilder<StressLogic>(
      id: 'sleep_date_range',
      builder: (ctrl) => Container(
        alignment: Alignment.center,
        child: Text(ctrl.state.dateRangeText),
      ),
    );
  }

  _buildDataDetailContainer() {
    return Container(
      padding: EdgeInsets.symmetric(vertical: 50.h, horizontal: 20.w),
      decoration: BoxDecoration(color: Colors.white70, borderRadius: BorderRadius.all(Radius.circular(60.r))),
      child: GetBuilder<StressLogic>(
        id: 'dataDetail',
        builder: (_) => Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            Column(
              children: [
                Text(LocaleKeys.stress_avg_pressure_value_text.ts),
                Text(_.state.dataDetail['avg_pressure_value']),
              ],
            ),
            Column(
              children: [
                Text(LocaleKeys.stress_min_pressure_value_text.ts),
                Text(_.state.dataDetail['min_pressure_value']),
              ],
            ),
            Column(
              children: [
                Text(LocaleKeys.stress_max_pressure_value_text.ts),
                Text(_.state.dataDetail['max_pressure_value']),
              ],
            ),
          ],
        ),
      ),
    );
  }

  _buildSummaryContainer() {
    return Column(
      children: [
        Text(LocaleKeys.stress_quality_title_text.ts, style: TextStyle(fontSize: 52.sp)),
        GetBuilder<StressLogic>(
          id: 'current_pressure',
          builder: (_) => Text(_.state.currentPressureText, style: TextStyle(fontSize: 110.sp)),
        ),
      ],
    );
  }

  _buildChartContainer() {
    return Container(
      padding: EdgeInsets.fromLTRB(10.w, 10.w, 10.w, 50.h),
      decoration: BoxDecoration(color: Colors.white70, borderRadius: BorderRadius.circular(60.r)),
      constraints: BoxConstraints.expand(height: 794.h),
      child: Column(
        children: [
          Expanded(
            child: GetBuilder<StressLogic>(
              id: 'stress_chart',
              builder: (ctrl) => SizedBox(height: 600.h, child: StressBarChart(modelList: ctrl.state.modelList)),
            ),
          ),
          SizedBox(height: 10.h),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              SizedBox(height: 30.h),
              Row(
                children: [
                  Container(
                    decoration: BoxDecoration(color: Colors.red.withOpacity(.7), borderRadius: BorderRadius.circular(7.r)),
                    width: 42.w,
                    height: 42.h,
                  ),
                  SizedBox(width: 20.w),
                  Text(LocaleKeys.stress_quality_height_text.ts),
                ],
              ),
              Row(
                children: [
                  Container(
                    width: 42.w,
                    height: 42.h,
                    decoration: BoxDecoration(color: const Color.fromRGBO(181, 124, 255, 1), borderRadius: BorderRadius.circular(7.r)),
                  ),
                  SizedBox(width: 20.w),
                  Text(LocaleKeys.stress_quality_medium_text.ts),
                ],
              ),
              Row(
                children: [
                  Container(
                    width: 42.w,
                    height: 42.h,
                    decoration: BoxDecoration(color: Colors.greenAccent, borderRadius: BorderRadius.circular(7.r)),
                  ),
                  SizedBox(width: 20.w),
                  Text(LocaleKeys.stress_quality_normal_text.ts),
                ],
              ),
              Row(
                children: [
                  Container(
                    decoration: BoxDecoration(color: const Color.fromRGBO(19, 208, 255, 1), borderRadius: BorderRadius.circular(7.r)),
                    width: 42.w,
                    height: 42.h,
                  ),
                  SizedBox(width: 20.w),
                  Text(LocaleKeys.stress_quality_low_text.ts),
                ],
              ),
              SizedBox(height: 30.h),
            ],
          )
        ],
      ),
    );
  }

  _buildRatioContainer() {
    return GetBuilder<StressLogic>(
      id: 'pressure_ratio',
      builder: (_) {
        List children = _.state.ratioList.map((e) => _buildRatioItem(e)).toList();
        children.insert(0, Text(_.getRatioTitle(), style: TextStyle(fontSize: 48.sp)));
        children.insert(1, SizedBox(height: 60.h));
        return Container(
          padding: EdgeInsets.symmetric(horizontal: 60.w, vertical: 50.h),
          decoration: BoxDecoration(color: Colors.white70, borderRadius: BorderRadius.circular(60.r)),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [...children],
          ),
        );
      },
    );
  }

  _buildRatioItem(PressureRatio ratio) {
    return Padding(
      padding: EdgeInsets.only(bottom: 45.h),
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(ratio.indicatorText, style: TextStyle(fontSize: 42.sp, color: Colors.grey.withOpacity(.8))),
              Text('${ratio.percentText}', style: TextStyle(fontSize: 42.sp, color: Colors.grey.withOpacity(.8))),
            ],
          ),
          SizedBox(height: 15.h),
          LinearProgressIndicator(
            value: ratio.percent,
            borderRadius: BorderRadius.circular(10.r),
            minHeight: 20.h,
            backgroundColor: Colors.grey.withOpacity(.2),
            valueColor: AlwaysStoppedAnimation(ratio.valueColor),
          ),
        ],
      ),
    );
  }

  /// 点击右上角日历图标，打开日历选择
  _showDatePicker(BuildContext context) {
    Get.dialog(
      TableCalendarDialog(
        onEvenLoad: (day) => logic.loadEventForDay(day),
      ),
      barrierColor: Colors.black.withOpacity(.8),
    ).then((value) => logic.datePicker(value));
  }
}
